<link rel="stylesheet" href="ccay/example/demo.css" type="text/css" />
<script type="text/javascript" src="ccay/example/demo.js" charset="utf-8"></script>
<script type="text/javascript" src="ccay/example/ui/templet/listTemplet.js" />
<div id="listTempletTab">
	<div title="API">
		<h2>Ccay.UI.tmplList(tmpl,datas,mapping,startIndex,key)</h2>
		<form class="ccay-form">
		<div class="ccay-form-body ccay-form-custom">
		
			<ul>						
			    <li class="ccay-form-row">
			        <samp><h3>相关API</h3></samp>
					<span class="ccay-form-input">
						<h3>描述</h3>
					</span>
				</li>
				<li class="ccay-form-row">
					<samp>tmpl</samp>
					<span class="ccay-form-input">模板对象选择器或模板字符</span>
				</li>
				<li class="ccay-form-row">
					<samp>datas</samp>
					<span class="ccay-form-input">json数据源</span>
				</li>
				<li class="ccay-form-row">
					<samp>mapping</samp>
					<span class="ccay-form-input">	映射datas中的列表对象名</span>
				</li>
				<li class="ccay-form-row">
					<samp>startIndex</samp>
					<span class="ccay-form-input">列表模板中的开始序号，默认为1</span>
				</li>
				<li class="ccay-form-row">
					<samp>key</samp>
					<span class="ccay-form-input">缓存模板的key值</span>
				</li>
			</ul>
		</div>
		</form>
	</div>
	<div title="Demo">
	   <h4><span>List模板生成</span></h4>
		<div  style="width:50%; float:left; padding: 2px 15px 30px 8px">
			<div>
			<ul id="listTemplate1">
			</ul>
			</div>
			<script type="text/javascript">
			$(function(){
				var users = [
				           {name:"隐形杀手",age:29,sex:"男"},
				           {name:"索拉",age:22,sex:"男"},
				           {name:"fesyo",age:23,sex:"女"},
				           {name:"恋妖壶",age:18,sex:"男"},
				           {name:"竜崎",age:25,sex:"男"},
				           {name:"你不懂的",age:30,sex:"女"}
				         ];
				var txtTmpl = "<table class='ccay-table'><tr><td width='16%'>${index}</td>"
				+"<td width='15%'>Name</td><td width='15%'>${name}</td><td width='15%'>Age</td>"
				+"<td width='15%'>${age}</td><td width='15%'>Sex</td><td width='15%'>${sex}</td></tr></table>";
				$('#listTemplate1').html(Ccay.UI.tmplList(txtTmpl,users));
			})
			</script>
        </div>
		<div class="clear"></div>
		<br>
		<h3>html 源码:</h3>
		<div class="codeArea">
			<pre id='html'>
&lt;div>
   &lt;ul id="listTemplate">&lt;/ul>
&lt;/div>
			</pre>
		</div>
		<h3>js 源码:</h3>
		<div class="codeArea">
			<pre id='js'>
var users = [
           {name:"隐形杀手",age:29,sex:"男"},
           {name:"索拉",age:22,sex:"男"},
           {name:"fesyo",age:23,sex:"女"},
           {name:"恋妖壶",age:18,sex:"男"},
           {name:"竜崎",age:25,sex:"男"},
           {name:"你不懂的",age:30,sex:"女"}
         ];

var txtTmpl = "&lt;table class='ccay-table'>&lt;tr>&lt;td width='16%'>${index}&lt;/td>"
+"&lt;td width='15%'>Name&lt;/td>&lt;td width='15%'>${name}&lt;/td>&lt;td width='15%'>Age&lt;/td>"
+"&lt;td width='15%'>${age}&lt;/td>&lt;td width='15%'>Sex&lt;/td>&lt;td width='15%'>${sex}&lt;/td>&lt;/tr>&lt;/table>";

$('#listTemplate').html(Ccay.UI.tmplList(txtTmpl,users));
			</pre>
		</div>
		<div>
			<a onclick="Ccay.example.openTry('#listTempletTab',$('#js').html(),$('#html').html())">亲自试一试</a>
		</div>
	</div>
	<div title="试一试" tabid="trytab" >
	    <fieldset class='ccay-demo'>
	    <legend ><h2>代码区</h2></legend>
		   
		   <span>请在下面的文本框中编辑您的代码，然后单击此按钮测试结果  ————></span><input value="try it yourself" type="button" onclick="Ccay.example.runDemo()" /> 

				<div>
				    <table  style="width:100%;">
				      <tr>
				        <td style="width:100%;">
						<h3>js Code:</h3>	
						  <!-- 高度按需来调整。默认最小应为100px -->					
	                      <textarea id="jsTxt" style="height:200px;width:99%;"></textarea>
	                    </td>   
	                  </tr>
	                  <tr>
	                    <td style="width:100%;">
						<h3>html Code:</h3>
						  <!-- 高度按需来调整。默认最小应为100px -->
	                      <textarea id="htmlTxt" style="height:100px;width:99%;"></textarea>
	                    </td>
	                  </tr> 
                    </table>
				</div>
           </fieldset>
        <fieldset class='ccay-demo'>
          <legend ><h2>结果区</h2></legend>
			<div>
				<div style="overflow:auto;" id="demoMainPanel"></div>
			</div>
        </fieldset>
     </div>
	 <div title="FAQ">
		  <form class="init ccay-form">
		    <div class="ccay-form-body">
		    <ul>
		    	<li class="ccay-form-row">
			      <samp><h3>问题</h3></samp>
			      <span class="ccay-form-input">
			               <h3>解决方案</h3>
			      </span>
			    </li>
		    </ul>
			</div>     
			<div class="ccay-form-custom">
			    <ul>                     
			        <!-- 若问题和内容较多，可在li中的class加上ccay-form-whole -->
			        <li class="ccay-form-row">
			                          <samp class="i18n" i18nKey=""></samp>                          
			                         <span class="ccay-form-input"></span>
			        </li>  
			    </ul>
			</div>
		  </form>                    
    </div> 
</div>
